<template>
    <view class="contanier">
        <CustomSearch :cancelVisible="true" @data="getSearchVal" :searchData="searchVal"></CustomSearch>
        <view class="history">
            <view class="history-top">
                <view class="history-title">历史记录</view>
                <view class="iconfont icon-qingkonglishijilu" @click="clearHistory"></view>
            </view>
            <view class="history-list">
                <view class="history-item" v-for="(item, index) in historyList" :key="index" @click="handleHistory(item)">
                    <view class="history-item-name">{{ item }}</view>
                    <view class="close" @click="deleteHistory(index)">×</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import CustomSearch from '@/components/CustomSearch.vue';

let searchVal = ref<string>('');
let historyList = ref<any>([])

onLoad((options) => {
	searchVal.value = options.data ? options.data : '';
	
	const history_search = uni.getStorageSync('history_search');
	historyList.value = history_search ? history_search : [];
})

const handleHistory = (item: any) => {
	handleSearch(item);
}

const clearHistory = () => {
    historyList.value = [];
	uni.removeStorageSync('history_search');
}

const deleteHistory = (index: Number) => {
    historyList.value.splice(index, 1);
}

const getSearchVal = (val: string) => {
	handleSearch(val);
}

const handleSearch = (data: string) => {
    uni.redirectTo({
        url: `/index_modules/searchResult/searchResult?data=${data}`
    })
}
</script>
<style>
page {
    background-color: #fff;
}
</style>
<style scoped lang="scss">
.contanier {
    position: relative;
    height: 100vh;
    margin-top: 20rpx;

    .top {
        display: flex;
        align-items: center;
        background-color: #fff;
        padding: 20rpx 40rpx;

        .search {
            flex: 1;
            display: inline-flex;
            align-items: center;
            height: 60rpx;
            box-sizing: border-box;
            border: 2rpx solid #838383;
            border-radius: 60rpx;
            margin-top: 20rpx;

            .search-input {
                flex: 1;
                font-size: 28rpx;
            }

            .iconfont {

                margin: 0 20rpx;
                color: #838383;
            }
        }

        .text-cancle {
            line-height: 60rpx;
            color: #838383;
            font-size: 32rpx;
            margin-left: 40rpx;
        }
    }
}

.history {
    padding: 40rpx;
    min-height: 400rpx;
    background-color: #fff;

    .history-top {
        display: flex;
        justify-content: space-between;
        margin-bottom: 40rpx;
    }

    .history-list {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 30rpx;

        .history-item {
            display: inline-flex;
            justify-content: space-between;
            align-items: center;
            min-width: 100rpx;
            padding: 0 20rpx;
            border: 2rpx solid #999;
            border-radius: 6rpx;

            .history-item-name,
            .close {
                color: #101010;
                font-size: 28rpx;
            }

            .close {
                margin-left: 16rpx;
                font-size: 42rpx;
            }
        }
    }
}
</style>
